<template>
  <div>
    <div class="page-modal">
        <div v-for="(item, j) in detailData" :key="j" class="codes-wrap">
          <div class="code-item">
            <p>
              <span>{{ date }}</span
              ><span style="margin-left: 10px">{{ realname }}制</span>
            </p>
            <div class="scan">
              <vue-qr :text="JSON.stringify({id: item.id, orderId: item.orderId, EntityType: 'batchCode'})" :size="100" :margin="0"></vue-qr>
              <div class="code">
                <span>{{ item.batchCode || '-' }}</span><br>
                <span>批次计划数：{{ item.planProductionNumText || '-'}}</span>
                <div style="height:5px"></div>
                <!-- <span style="color:#888888;font-size:12px">{{item.craftProcessDesc || '-'}}</span> -->
              </div>
            </div>
            <div class="list">
              <p>
                <span>工单编号：</span>
                <span>{{ item.orderCode || '-' }}</span>
              </p>
              <p>
                <span>物料名称：</span>
                <span>{{ item.goodsName || '-' }}</span>
              </p>
              <p>
                <span>物料编号：</span>
                <span>{{ item.goodsCode || '-' }}</span>
              </p>
              <p>
                <span>规格：</span>
                <span>{{ item.goodsSpec || '-' }}</span>
              </p>
              <p>
                <span>基本单位：</span>
                <span>{{ item.goodsBasicUnitText || '-' }}</span>
              </p>
              <p>
                <span>工单计划数量：</span>
                <span>{{ item.orderPlanProductionNumText || '-' }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import moment from 'moment'
import vueQr from 'vue-qr'
import { getAction } from '../../../../api/manage'
export default {
  components: { vueQr },
  props: {
    id: {
      type: String,
      default: '',
    },
    sortForm: {
      type: Object,
      default: {
        sortType: '',
        sortColumn: '',
      },
    },
  },
  data() {
    return {
      moment,
      detailData: [],
    }
  },
  created() {
    this.realname = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.realname
    this.date = moment(new Date()).format('YYYY-MM-DD')
    let obj = {
      ...this.sortForm,
      id: this.id,
      pageNo: 1,
      pageSize: 999
    }
    getAction('/mess/messProductBatch/pageQueryPrintInfo', obj).then((res) => {
      if (res.code === 200) {
        this.detailData = res.result.records
      }
    })
  },
  methods: {},
}
</script> 

<style scoped lang='less'>
.page-modal {
  height: calc(100vh - 200px);
  overflow-y: scroll;
}
.codes-wrap {
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}
// .codes-wrap:nth-child(n + 2) {
//   margin-top: 1cm;
// }
.code-item {
  // width: 700px;
  // height: 350px;
  width: 100mm;
  height: 50mm;
  border: solid 1px #eee;
  position: relative;
  font-size: 12px;
}
.scan {
  position: absolute;
  top: 25px;
  left: 20px;
}
.code {
  color: #000;
  font-size: 12px;
  font-weight: 500;
  // margin-left: -10px;
}
.list {
  color: #000;
  font-size: 12px;
  font-weight: 500;
  margin-left: 140px;
  margin-top: -10px;
  p {
    margin-bottom: 0;
    line-height: 17px;
  }
}
</style>